<template>
  <div class="contentBox">
    <div v-if="list">
      <h3 style="margin-bottom: 20px">
        <i
          class="el-icon-bell"
          style="margin-left: 10px; font-size: 20px; color: #b71b24"
        ></i>
        公告列表
      </h3>
      <div class="noticeList">
        <div class="noticeItem" @click="handleClick(item.id)" :span="0"  v-for="(item, index) in tableData" :key="index" :name="index">
          <span>{{item.topic}}</span>
          <span style="color: #999">{{item.time}}</span>
        </div>
      </div>
    </div>
    <div v-if="!list">
      <el-page-header @back="goBack" content="详情" style="margin-bottom: 20px">
      </el-page-header>
      <h2 style="text-align: center">{{topic}}</h2>
      <div class="noticeContent">
        <span>
          {{content}}
        </span>

        <div style="text-align: right; margin-top: 50px">{{time}}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  created() {
    //获取列表数据
    this.getAnnouncementList();
  },
  data() {
    return {
      // 列表和详情页控制
      list: true,
      //存放列表数据
      tableData:[],
      //标题
      topic:'',
      //内容
      content:'',
      //时间
      time:'',
    };
  },
  methods: {
    //查询公告列表
   async getAnnouncementList() {
       let {data:res} =await this.$http.post("banservice/announcement/getallannouncement");
       this.tableData = res.data.list;
    },
    async handleClick(id) {
      this.list = false;
      //获取响应列表的数据
      let {data:res} =await this.$http.get("banservice/announcement/getannouncementbyid/"+id);
      this.topic = res.data.list.topic;
      this.content = res.data.list.content;
      this.time = res.data.list.time;
    },
    // 点击返回
    goBack() {
      this.list = true;
    },
  },
};
</script>

<style lang="less" scoped>
.contentBox {
  .noticeList {
    padding: 20px;
    border: 1px solid #eee;
    height: 68vh;
    .noticeItem {
      border-bottom: 1px dashed #ccc;
      padding: 10px;
      display: flex;
      justify-content: space-between;
      cursor: pointer;
      &:hover {
        color: cornflowerblue !important;
      }
    }
  }
  .noticeContent {
    padding: 40px;
  }
}
</style>